import { computed, defineComponent, inject, reactive, ref } from 'vue'
import {relationShip} from '@/constants/indexTree'
import { Progress, Dropdown, Doption, Popover } from "@arco-design/web-vue";
import { IconCaretUp, IconDelete, IconArrowFall, IconCheck } from '@arco-design/web-vue/es/icon';
import ADropDown from '../../../components/aDropDown/index'
import './symbolNode.scss'
import {removeAllChildDom} from '@/utils/util'

export default defineComponent({
    name: 'SymbolNode',
    inject: ["getGraph", "getNode"],

    setup: (props, {emit}) => {
        const getGraph = inject('getGraph')
        const getNode: any = inject('getNode')
        const state = reactive(getNode().getData())
        const { onRemoveEvent, onAddIndexCard,onPopoverDelete, ...rest } = state
        const changeSymbolModel = ref<boolean>(false)
        const isActive = ref<boolean>(false)
        const removeEvent = () => {
            onPopoverDelete?.(false)
            onRemoveEvent?.(rest)
          }
          const addIndexCard = (v:any, b:any) => {
            onPopoverDelete?.(false)
            onAddIndexCard?.(v, b)
          }
          state[`symbol${state.id}`] = false

        const popoverDelete = (v:any) => {
            isActive.value = v
            onPopoverDelete?.(v)
        }
        const addIndexVisible = (v:any) => {
            onPopoverDelete?.(v)
        }
        return () => {
            return (
                <>
                    <div class="single-symbol-card">
                        <div class="symbol-card" >
                            <Popover
                                position="bottom"
                                trigger='hover'
                                content-class='popver-symbol-card'
                                onPopupVisibleChange={(v:boolean)=>{
                                    state[`symbol${state.id}`] = v
                                }}

                                class="popoverdom"
                                v-slots={{
                                    content: () => (
                                        <>
                                            <ADropDown cardType='indexCard'
                                                onAddSymbolItem={(v:any)=>{
                                                    const domDelBtn = document.getElementsByClassName('popoverdom')
                                                    domDelBtn[0].remove()
                                                    addIndexCard(v, {
                                                        symbolType: true,
                                                        cardType: 'symbol'
                                                    })
                                                }}
                                            />
                                        </>
                                    )
                                }}
                            >
                                <div class="symbol-wrapper">
                                    <div class="symbol-wrapper-img"
                                        onMouseover={() => {
                                            state[`symbol${state.id}`] = true
                                        }}
                                    >
                                        <img  v-show={!state[`symbol${state.id}`]} src={state.img} alt="" />
                                        <img v-show={state[`symbol${state.id}`]} src={state.activeImg} alt="" />
                                    </div>
                                </div>
                            </Popover>
                            <Popover
                                position="rt"
                                trigger='click'
                                content-class='popver-index-card'
                                v-model={changeSymbolModel}   
                                class="popverCardDom"
                                onPopupVisibleChange={(v:any)=>{
                                    addIndexVisible(v)
                                }}           
                                v-slots={{
                                    content: () => (
                                        <>
                                            <ADropDown 
                                                cardType='symbolCard'
                                                onAddSymbolItem={(v:any)=>{
                                                    addIndexCard(v, {
                                                        symbolType: false,
                                                        cardType: 'symbol'
                                                    })
                                                }}
                                                onAddIndexItem = {(v:any) => {
                                                    v.heightLightLine = true
                                                    v.cardName = v.metricsName
                                                    v.type = 'indexCard'
                                                    addIndexCard(v, {
                                                        symbolType: false,
                                                        cardType: 'symbol'
                                                    })
                                                }}
                                            />
                                        </>
                                    )
                                }}
                            >
                                <div class={['front-arrow-icon',{"symbol-front-arrow_icon": state[`symbol${state.id}`]}]}>
                                    <IconArrowFall />
                                </div>
                            </Popover>
                        </div>
                    </div>
                    <Popover
                      position="bottom"
                      trigger="click"
                      content-class="popver-delete"
                      class="deleteIconDom"
                      onPopupVisibleChange={(v:any)=>{
                        
                        popoverDelete(v)
                      }}

                      v-slots={{
                        content: () => (
                          <>
                            <div style={{ fontSize: '12px', color: '#33353B' }}>
                              <span>确认删除？</span>
                              <span
                                style={{
                                  color: '#FF1A3B',
                                  cursor: 'pointer',
                                  paddingRight: '4px'
                                }}
                                onClick={() =>{
                                    const domDelBtn :any = document.getElementsByClassName('deleteIconDom')
                                    domDelBtn[0].remove()
                                    removeEvent()
                                }}
                              >
                                删除
                              </span>
                            </div>
                          </>
                        )
                      }}
                    >
                      <div class="index-card-delete symbol-delete-icon">
                        <IconDelete class={{activeIconDelete: isActive.value}}/>
                      </div>
                    </Popover>
                </>
            )
        }
    },


})
